import React, { Component } from 'react';
import styles from './index.module.scss'
import { updateWebNavIndex } from '../../../store/app/actions'
import WImage from './image'
import Crypto from './crypto'
import QRCode from './qrcode'
import './index.scss'
import { Collapse } from 'antd';

const { Panel } = Collapse;

interface StateInterface {
}

interface PropsInterface {
}

class WebTool extends Component<PropsInterface, StateInterface> {

  componentDidMount() {
    updateWebNavIndex('6')
  }

  render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
    return (
      <Collapse defaultActiveKey={['0', '1', '2', '3', '4']} className={`web-tool w-content-box ${styles['web-tool']}`} bordered={false}>
        <Panel className={styles.section} header="图片识别" key="0">
          <WImage />
        </Panel>
        <Panel className={styles.section} header="加密、解密" key="1">
          <Crypto />
        </Panel>
        <Panel className={styles.section} header="二维码" key="2">
          <QRCode />
        </Panel>
      </Collapse>
    );
  }
}

export default WebTool;
